<div style="padding: 5px;" class="history-list new-header-color">
	<div>

		<div class="toolSet">
			<div class="toolSetLeft">
				<!-- <p>Period:<nz-range-picker nzSize="default" style="margin-left: 0.1rem"></nz-range-picker></p> -->
				<div class="buttonSet">
					<div class="table-buttons-left">
						<!-- <div class="operate" (click)="refresh()"><i
								class="iconfont icon-refresh1"></i>{{'TrafficManagement.IncidentRecord.Refresh' | translate}}
						</div> -->
						<button nz-button nzType="primary" (click)="refresh()"><i nz-icon nzType="reload" nzTheme="outline"></i>{{'TrafficManagement.IncidentRecord.Refresh' | translate}}</button>
					</div>
				</div>
			</div>
			<div class="toolSetRight">
				<itmp-toolbar [toolbarList]="toolbarList" [tableHeader]="renderHeader" exportName="IncidentRecordHistoryList"
					[searchData]="queryData.condition" eventType="incident-position" [selectData]="selectedItem">
				</itmp-toolbar>
			</div>
		</div>
	</div>
	<nz-table id="nzTable" #basicTable [nzShowPagination]="false" [nzData]="listOfData" [nzFrontPagination]="false">
		<thead *ngIf="showTable">
			<tr>
				<ng-container *ngFor="let item of renderHeader">
					<ng-container *ngIf="item.isChecked">

						<th *ngIf="item.name === 'ID' || item.name === 'Zone ID' || item.name === 'Road Name'"
							class="listTitle">
							<div class="text-ellipsis">{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div>
							<div class="no-print" style="padding-top: 0.1rem"><input nz-input placeholder="" [(ngModel)]="item.key"
									(ngModelChange)="filterSearch()" /></div>
						</th>

						<th *ngIf="item.name === 'Type'" class="listTitle">
							<div>{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div>
							<div class="no-print" style="padding-top: 0.1rem">
								<nz-select style="width: 1rem" [(ngModel)]="irTypeSelect"
									(ngModelChange)='irTypeSearch()' [nzDropdownMatchSelectWidth]="false" nzAllowClear>
									<nz-option *ngFor="let option of irType" [nzLabel]="'TrafficManagement.IncidentRecord.'+option.name|translate"
										[nzValue]="option.value"></nz-option>
								</nz-select>
							</div>
						</th>

						<th *ngIf="item.name === 'Source' || item.name === 'Status'" class="listTitle">
							<div>{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div>
							<div class="no-print" style="padding-top: 0.1rem">
								<nz-select style="width: 1rem" [(ngModel)]="item.key"
									[nzDropdownMatchSelectWidth]="false" (ngModelChange)='irTypeSearch()' nzAllowClear>
									<nz-option *ngFor="let option of item.selectList" [nzLabel]="'TrafficManagement.IncidentRecord.'+option.name|translate"
										[nzValue]="option.value"></nz-option>
								</nz-select>
							</div>
						</th>

						<th *ngIf="item.name === 'Start Date'" class="listTitle">
							<div>{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div>
							<div class="no-print" style="padding-top: 0.1rem">
								<nz-range-picker nzSize="default" [(ngModel)]="dateRange"
								(ngModelChange)="onChange($event)" [nzDisabledDate]="disabledDate"></nz-range-picker>
							</div>
						</th>

						<th *ngIf="item.name === 'End Date'" class="listTitle">
							<div>{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div>
							<div class="no-print" style="padding-top: 0.1rem">
								<nz-range-picker nzSize="default" [(ngModel)]="endDateRange"
								(ngModelChange)="endDateOnChange($event)"  [nzDisabledDate]="disabledDate"></nz-range-picker>
							</div>
						</th>

						<th *ngIf="item.name === 'Planned Time To Clear'" class="listTitle">
							<div>{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div>
							<div class="no-print" style="padding-top: 0.1rem">
								<nz-range-picker nzSize="default" [(ngModel)]="clearDateRange"
								(ngModelChange)="clearTimeOnChange($event)"></nz-range-picker>
							</div>
						</th>

						<th *ngIf="item.name === 'Lane Blockage'" class="listTitle">
							<div>{{'TrafficManagement.IncidentRecord.'+item.value | translate}}</div>
							<div class="no-print" style="padding-top: 0.1rem;width: 1rem;height: 0.4rem;">
							</div>
						</th>

					</ng-container>
				</ng-container>
			</tr>
		</thead>
		
		<tbody *ngIf="showTable">
			<tr *ngFor="let data of basicTable.data" (click)="showDetail(data)"
				[ngClass]="{'active':data.ir_ID == editingItem}">
				<td *ngIf="renderHeader[0].isChecked" class="text-ellipsis">{{ data.ir_ID }}</td>
				<td *ngIf="renderHeader[1].isChecked">{{ ('TrafficManagement.IncidentRecord.' + (typeList && typeList[data.type])) |translate}}</td>
				<td *ngIf="renderHeader[2].isChecked">{{ data.start_Time | date:'yyyy/MM/dd HH:mm' }}</td>
				<td *ngIf="renderHeader[3].isChecked">{{ data.end_Time | date:'yyyy/MM/dd HH:mm' }}</td>
				<td *ngIf="renderHeader[4].isChecked">{{ data.eTime | date:'yyyy/MM/dd HH:mm' }}</td>
				<td *ngIf="renderHeader[5].isChecked">{{ data.zone_ID }}</td>
				<td *ngIf="renderHeader[6].isChecked" class="text-ellipsis">{{ data.road_Name }}</td>
				<td *ngIf="renderHeader[7].isChecked">
					<ng-container *ngFor="let data of data.laneBlockage">
						<span *ngIf="laneBlockageObj[data]">
							<img class="img-lane" [src]="'../content/images/icons/' + laneBlockageObj[data]"
								style="width: 20px;">
						</span>
					</ng-container>
				</td>
				<td *ngIf="renderHeader[8].isChecked">
					{{ ('TrafficManagement.IncidentRecord.' + (sourceList && sourceList[data.source])) |translate}}
				</td>
				<td *ngIf="renderHeader[9].isChecked">
					{{ ('TrafficManagement.IncidentRecord.' + (statusList && statusList[data.veri_State])) |translate}}
				</td>
			</tr>
		</tbody>
		<tfoot class="ir-history-list-footer">
			<tr>
				<td [attr.colspan]="renderHeader.length+1" style="padding: 10px;">
					<itmp-pagination [totalEle]="pagination.totalEle" [pageSize]="pagination.pageSize"
						[pageNum]="pagination.currentPage" showCountInfo=true [count]="pagination.currentSize"
						(pageNumChange)="onPageChange($event)" (pageSizeChange)="onSizeChange($event)">
					</itmp-pagination>
				</td>
			</tr>
		</tfoot>
	</nz-table>
</div>
